<template>
    <div class="wagonbalance">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">仓库监控</span>
        </div>
        <!-- <div class="dateSearch">
            <span class="date_item" :class="{'date_item_active':dateIndex==0}" @click="changIndex(0)">近一周</span>
            <span class="date_item" :class="{'date_item_active':dateIndex==1}" @click="changIndex(1)">本月</span>
            <span class="date_item" :class="{'date_item_active':dateIndex==2}" @click="changIndex(2)">本年</span>
        </div> -->
        <div class="linChart" ref="chart_wagonbalance"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

let dateIndex = ref(0);//选中的时间范围下标

const changIndex = (index: number) => {
    if (dateIndex.value != index) {
        dateIndex.value = index;
    }
}
const chartData = reactive({
    data: [
        { date: '08:00', value: 50, value2: 10 },
        { date: '10:00', value: 210, value2: 15 },
        { date: '12:00', value: 200, value2: 18 },
        { date: '14:00', value: 150, value2: 20 },
        { date: '16:00', value: 130, value2: 30 },
        { date: '18:00', value: 160, value2: 35 },
        { date: '20:00', value: 100, value2: 8 },
        { date: '22:00', value: 120, value2: 44 },
    ] as any,
})

const chart_wagonbalance = ref(null);
let myChart = null as any;

const updateChart = () => {
    if (!chart_wagonbalance.value) return;

    // Initialize the chart
    myChart = echarts.init(chart_wagonbalance.value);

    // Define chart options
    const option = {
        grid: {
            top: '20%',//生成的echarts图片和顶部的距离
            bottom: '10%',//echarts图片和底部的距离
            left: '6%',//echarts图片和左边的距离
            right: '10%',//echarts图片和右边的间距,
            containLabel: true,//当containLabel:为ture时，以上设置生效
        },
        xAxis: {
            type: 'category',
            data: chartData.data.map((item: any) => item.date),
            axisTick: { show: false },
            name: '日期',
            nameTextStyle: {
                color: '#FFFFFF',
                fontWeight: "normal",
                fontSize: 8,
                verticalAlign: "top",
                lineHeight: 27,
                align:"center"
            },
            // boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            },

        },
        yAxis: [{
            type: 'value',
            // boundaryGap: true,
            axisTick: { show: false },
            name: '单位:t',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 10,
                align: "right",
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)"
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            }
        }],
        tooltip: {
            trigger: 'axis'
        },
        series: [{
            // name: "",
            type: "bar",
            barWidth: 8,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(0,227,254,1.00)"
                        },
                        {
                            offset: 1,
                            color: "rgba(0,227,254,0)" // 同样的颜色，因为渐变只在 0% 位置出现
                        }
                    ]),
                    borderRadius: [4, 4, 0, 0] // 这里设置圆角的大小
                },

            },
            data: chartData.data.map((item: any) => item.value)
        }]

    };
    console.log(option);


    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// Watch for data changes and update the chart
watch(() => chartData.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.wagonbalance {
    position: absolute;
    width: vw(422);
    height: vh(283);
    left: vw(20);
    top: vh(363);
    background: url(@/assets/images/dailyMaintenance/l-bg-01.png) no-repeat;
    background-size: 100% 100%;
    z-index: 999;

    .boxTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: vh(8);

        img {
            width: vh(15);
            height: vh(17);
        }

        .title {
            margin-left: vh(6);
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: vh(16);
            color: #00E3FE;
            line-height: vh(16);
        }
    }

    .dateSearch {
        position: absolute;
        top: vh(54);
        right: vh(15);
        z-index: 9999;

        .date_item {
            padding: 0 vh(9);
            display: inline-block;
            background: rgba(11, 122, 155, 0.5);
            border-radius: 3px;
            line-height: vh(18);
            margin-left: vh(10);
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(11);
            color: #FFFFFF;
            border: none;
            cursor: pointer;
            &.date_item_active {
                border: 1px solid #00BDE5;
            }
        }
    }

    .linChart {
        width: 100%;
        height: vh(270);
    }
}
</style>
